<!DOCTYPE html>
<html>
<head>
    <title>结伴详情</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script>


        //获取穿过来的评论id
        var id = getParams().id;
        var currentPage = 1;//当前页
        var totalPage;//总页数
        var travelArr = [];//存放页面的容器
        var loading = false;//判定请求数据是否传完的标记
        var pId; //上级评论id
        var greatStatus;//点赞状态
        var enshrineStatus;//收藏状态
        var signId; //标记对象的id
        function query() {
            if (loading) {//如果是加载状态就不发送请求
                return;
            }
            loading = true;//进入加载状态
            //查询该攻略下的所有评论
            //查询评论的所有评论
            $.get(baseUrl + "travels/" + id + "/comments", {currentPage: currentPage, pageSize: 8}, function (data) {
                //每次查询都要把页面信息合并到容器中
                $.merge(travelArr, data.list);
                var json = {list: travelArr};
                $("#travelCom").renderValues(json, {
                    getHref: getHref,
                    getCommentID: function (item, value) {
                        $(item).attr("data-id", value);
                    }
                });
                //绑定评论弹窗
                $(".travelCommentBtn").click(function () {
                    pId = $(this).data("id");
                    $('#commentForm')[0].reset();
                    $('#commentModal').modal('show');
                });
                //每查询一次当前页数加1
                currentPage++;
                //获取数据的总页数
                totalPage = data.pages;
                loading = false;//加载完成后把状态改成可以发送请求的状态
            });

        }

        $(function () {

            //默认自动查询第一页数据
            query();
            $(window).scroll(function () {
                //如果页面的滚动长度加窗口长度等于页面的总长度时 发送请求查询下一页数据
                if ($(document).scrollTop() + $(window).height() >= $(document).height() - 50) {//提前五十像素发送请求
                    //当前页小于总页数的时候才查询
                    if (currentPage <= totalPage) {
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoIcon: '../img/icon/loading.gif',
                            infoText: '不要拉了,再拉就出屎了!',
                            autoClose: 2500
                        });
                    }

                }
            });

            //查询结伴详细信息
            $.get(baseUrl + "togethers/" + id, function (data) {
                $(".travels").renderValues(data, {
                    getHref: getHref
                })
            });
            //文本域提交按钮
            $(".submitBt").click(function () {
                $.ajax({
                    url: baseUrl + "travelComments/",
                    method: "post",
                    data: {
                        parentId: pId,
                        'travel.id': id,
                        content: $("#comment").val()

                    },
                    success: function (data) {
                        window.location.reload();
                    }

                })
            })
            $(".clearBtn").click(function () {
                $("#comment").val('')
            });
            //模态框关闭事件绑定
            $("#closeBtn").click(function () {
                $("#commentModal").modal("hide");
            });
            //模态框提交事件绑定
            $("#subBtn").click(function () {
                $("#commentModal").modal("hide");
                $.ajax({
                    url: baseUrl + "travelComments/",
                    method: "post",
                    data: {
                        parentId: pId,
                        'travel.id': id,
                        content: $("#content").val()

                    },
                    success: function (data) {
                        window.location.reload();
                    }

                })
            });
            //马上报名
            $(".sign").click(function () {
                    $(document).dialog({
                        titleShow: false,
                        content: "报名成功,直接联系约主!"
                    });
            })
            //待开发功能
            $(".open").click(function () {
                    $(document).dialog({
                        titleShow: false,
                        content: "功能开发中,敬请期待!"
                    });
            })
        })
    </script>
    <style>
        .a {
            list-style: none;
        }

        .a2 {
            width: 40px;
            float: left;
        }
    </style>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-1">
            <div class="col">
                <a href="/together.html">
                    <span><i class="fa fa-chevron-left"></i></span>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="travels">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
        </small>
        <div class="row">
            <div class="col-4 img">
                <a data-url="/userProfiles.html?id=" render-key="author.id" render-fun="getHref">
                    <img class="rounded-circle" render-src="author.headImgUrl" style="width: 80%">
                </a>
            </div>
            <div class="col-4 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <br>
                    <span id="lookFans">0 </span>粉丝
                </small>
            </div>
            <div class="attention col-4">
                出发地:<span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>
    <div class="container">
        <fieldset>
            <legend>出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人数
                    <span render-html="persons"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>
        <hr>
        <p><span render-html="content"></span></p>
    </div>
    <button type="button" class="btn btn-danger btn-lg btn-block sign">马上报名</button>

    <p>
        <span>1</span>人已报名
    <hr>
    <ul class="a">
        <li><a href="/together/myself/38613615.html" class="a2">
            <img class="rounded-circle" width="40px"
                 src="https://p1-q.mafengwo.net/s12/M00/B4/0E/wKgED1vGF42AOMj5AACdfPJwIrw43.jpeg?imageMogr2%2Fthumbnail%2F%21120x120r%2Fgravity%2FCenter%2Fcrop%2F%21120x120%2Fquality%2F90"></a>
        </li>
    </ul>
    </p>

</div>
<div class="commnet">
    <div>
        <form method="post" action="" id="commentEditor">
            <div class="comments _j_comment_list">
                <textarea id="comment" cols="48" rows="8" placeholder="留言点这里"></textarea>
            </div>
        </form>
        <button class="btn btn-info submitBt">评论</button>
        <button class="btn btn-info clearBtn">清空</button>

    </div>
</div>
<div id="travelCom" class="container">
    <div render-loop="list"><!--快来发表你的评论吧-->
        <div class="row">
            <div class="col-2 comment-head">
                <a data-href="/userProfiles.html?id=" render-key="list.user.id" render-fun="getHref">
                    <img class="rounded-circle" render-src="list.user.headImgUrl">
                </a>
            </div>
            <div class="col">
                <a style="font-size: 10px;color: #61CAD0" render-html="list.user.nickName"></a>
                <span class="comment-date" render-html="list.creatTime"></span>
                <span class="travelCommentBtn" render-key="list.id" render-fun="getCommentID">回复</span>
                <div class="comment-content">
                    <p render-html="list.content"></p>
                </div>
                <hr/>
                <div id="commentReplyBtn">
                    <div render-loop="list.comments">
                        <div class="row">
                            <div class="col-2 comment-head">
                                <a data-href="/userProfiles.html?id=" render-key="list.comments.user.id"
                                   render-fun="getHref">
                                    <img class="rounded-circle" render-src="list.comments.user.headImgUrl">
                                </a>
                            </div>
                            <div class="col">
                                <a style="font-size: 10px;color: #61CAD0"
                                   render-html="list.comments.user.nickName"></a>
                                <span class="comment-date" render-html="list.comments.creatTime"></span>
                                <div class="comment-content">
                                    <p render-html="list.comments.content"></p>
                                </div>
                                <hr/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="operation">
    <div class="d-flex justify-content-between">
        <div class="p-2"><i class="fa fa-commenting-o"></i>
            <a href="javascript:;" class="travelCommentBtn flipInX"> 请发表您的评论</a>
        </div>
    </div>
</div>
<div class="operation">
    <button type="button" class="btn btn-warning btn-group-lg open">关注</button>
    <button type="button" class="btn btn-primary btn-group-lg open">我要约伴</button>
</div>
<!--评论弹框-->
<div class="modal fade" id="commentModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <form id="commentForm">
                    <div class="form-group">
                        <label for="content" class="col-form-label">请吹牛:</label>
                        <input type="text" autofocus class="form-control" id="content">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="closeBtn">关闭</button>
                <button type="button" class="btn btn-primary" id="subBtn">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
</div>
</body>
</html>